<!-- my-calendar.vue -->
<template>
  <div class="my-calendar">
    <FullCalendar
      ref="myCalendar"
      :options="calendarOptions"
    />
  </div>
</template>

<script>
  // 引入已经安装好的，项目中所需要的 FullCalendar 插件
  import FullCalendar from '@fullcalendar/vue3'
  import zhcn from "@fullcalendar/core/locales/zh-cn"; //中文
  import dayGridPlugin from '@fullcalendar/daygrid'
  import timeGridPlugin from '@fullcalendar/timegrid'
  import interactionPlugin from '@fullcalendar/interaction'
  import listPlugin from '@fullcalendar/list'

  export default {
    name: "my-calendar",
    components: {
      FullCalendar
    },
    data() {
      return {
        // 日历配置参数，在 三、参数 中有详细介绍
        calendarOptions: {
          plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin],
		  locale: zhcn, 
		  headerToolbar: {
		    //按钮位置
		    start: "addButton",
		    center: "prev title next",
		    right: "dayGridMonth,timeGridWeek,listMonth",
		  },
		  buttonText: {
		    // 按钮文字修改
		    dayGridMonth: "按月",
		    timeGridWeek: "按周",
		    listMonth: "列表",
		  },
		  slotLabelFormat: "HH:mm", //标签时间格式化
		  eventTimeFormat: "HH:mm", //日程时间格式化
		  allDaySlot: false, //不显示all-day（全天）
		  firstDay: 0, //设置一周中显示的第一天是哪天，周日是o，周一是1，类推
		  dayMaxEventRows: 3, //单元格最多显示日程数
		  fixedWeekCount: false, //月视图显示周数,关闭显示正确周数
        }
      }
    }
  }
</script>

<style scoped>
.main {
  width: 700px;
  height: 700px;
  margin: 50px auto;
}
.main >>> .fc-toolbar-chunk {
  display: flex;
}
.main >>> .fc-next-button,
.main >>> .fc-prev-button {
  background: white !important;
  border: none;
  box-shadow: none !important;
}

.main >>> .fc-icon-chevron-right,
.main >>> .fc-icon-chevron-left {
  color: #2c3e50;
}
</style>